<template>
  <div id="app">
    <div class="main" :class="{'padding':isShow}">
      <router-view></router-view>
    </div>
    <div class="tabbar" v-if="isShow">
      <div
        class="item"
        @click="itemClick(item)"
        :style="`color:${$route.path===item.path?'#FEC917':''}`"
        v-for="(item, index) in tabs"
        :key="index"
      >
        <span class="iconfont" :class="[item.icon]"></span>
        <span class="name">{{item.name}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShow: true,
      tabs: [
        {
          name: "首页",
          path: "/"
        },
        {
          name: "消息",
          path: "/message"
        },
        {
          name: "购物车",
          path: "/card"
        },
        {
          name: "我的",
          path: "/person"
        }
      ]
    };
  },
  watch: {
    $route: {
      handler(n) {
        console.log(n.path);
        this.isShow = n.path === "/" ||
            n.path === "/message" ||
            n.path === "/card" ||
            n.path === "/person";
      },
      immediate: true
    }
  },
  methods: {
    itemClick(item) {
      this.$router.push(item.path);
    }
  }
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
.main {
}
.padding {
  padding-bottom: 48px;
}
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  z-index: 99;
  height: 48px;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 4px 4px 20px rgba(204, 204, 204, 0.418);
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .iconfont {
      font-size: 24px;
    }
    .name {
      font-size: 14px;
    }
  }
}
</style>
